import React, { Component } from 'react'
import  Page2Class from  "../css/page2.module.css";
//css in js
import  Theme1 from  "../css/theme1.module.css";
import  Theme2 from  "../css/theme2.module.css";
export default class Page2 extends Component {

  constructor(){
    super();
    this.state = {
      theme:Theme1
    }
  }
  change  = ()=>{  //主题切换
    this.setState({  //切换赋值
      theme:this.state.theme === Theme1?Theme2: Theme1
    })
  }
  render() {
    return (
      <div>
        <h3>局部样式</h3>
           <div className={Page2Class.tr}>
            <div className={Page2Class.td}>编号</div>
            <div className={Page2Class.td}>姓名</div>
            <div className={Page2Class.td}>年龄</div>
            <div className={Page2Class.td}>操作</div>
        </div>
        <hr/>
        <button onClick={()=>{
          this.change()
        }}>主题切换</button>
        <div className={this.state.theme.tip}>我们是提示内容</div>
      </div>
    )
  }
}
